<template>
  <a-table
    class="page-table"
    :row-selection="rowSelection"
    :columns="realColumns"
    :data-source="realData"
    :pagination="pagination"
    :scroll="{ x: '100%', y: '100%' }"
    @change="handlePage"
  >
    <template
      v-for="item in columns"
      :slot="item.key"
      slot-scope="text, record, $index"
    >
      <span :key="item.key">
        <!-- 文字前方颜色小点 -->
        <span :class="item.colorMap ? item.colorMap[text] : ''" />
        <!-- 表格插槽 -->
        <slot
          v-if="$scopedSlots[item.key]"
          :name="item.key"
          :row="record"
          :index="$index"
        />
        <!-- 文字显示 -->
        <span v-else>
          <span v-if="getText(item, text)" :title="getText(item, text)">
            {{ getText(item, text) }}
          </span>
          <span v-else>-</span>
        </span>
      </span>
    </template>
  </a-table>
</template>

<script>
export default {
  name: 'PageTable',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    // 分页参数
    page: {
      type: Object,
      default: function () {
        return {
          pageNum: 1,
          pageSize: 20,
          total: 0
        }
      }
    },
    // 上级传入的表格多选项参数（例如：禁用某项）
    rowSelectOption: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    rowSelection() {
      return {
        ...this.rowSelectOption,
        onChange: this.onChange
      }
    },
    realData() {
      const encryptMapKeys = Object.keys(this.encryptMap)
      return this.data.map(item => {
        encryptMapKeys.forEach(key => {
          item[key] = this.handleEncrypt(item[key], this.encryptMap[key])
        })
        return { ...item }
      })
    },
    // 解密字段
    encryptMap() {
      const result = {}
      this.columns.forEach(item => {
        if (item.encrypt) {
          result[item.key] = item.encrypt
        }
      })
      return result
    },
    realColumns() {
      return this.columns.map(item => {
        return {
          ...item,
          dataIndex: item.key,
          ellipsis: true,
          scopedSlots: { customRender: item.key },
          filterDropdown: item.filters ? this.filterTable : null
        }
      })
    },
    pagination() {
      return {
        current: this.page.pageNum,
        showSizeChanger: true,
        defaultCurrent: 1,
        defaultPageSize: 20,
        pageSizeOptions: ['20', '30', '50', '100'],
        total: this.page.total,
        showTotal: () => `共 ${this.page.total} 条记录`,
        showQuickJumper: true
      }
    }
  },
  methods: {
    getText(item, text) {
      return item.valueMap ? item.valueMap[text] : text
    },
    filterTable(value) {
      this.$emit('handleFilter', value.column.key, value.selectedKeys)
    },
    handlePage(page) {
      this.$emit('handlePage', {
        pageNum: page.pageSize !== this.page.pageSize ? 1 : page.current,
        pageSize: page.pageSize,
        total: this.page.total
      })
    },
    // 加密方法调用
    handleEncrypt(value, key) {
      // 手机号形式解密 & 脱敏
      if (key === 'telephone') {
        return value
          ? getRSADecVal(value, this.publicKey).replace(
              /(\d{3})\d{4}(\d{4})/,
              '$1****$2'
            )
          : ''
      }
    },
    onSelectChange(keys, rows) {
      this.$emit('selectChange', rows)
    }
  }
}
</script>

<style lang="less" scoped>
.page-table {
  height: 100%;
}
// .ant-table-wrapper {
//   height: 100%;
// }
/deep/ .ant-table {
  height: calc(100% - 50px);
}
/deep/ .ant-table-tbody > tr > td:last-child .anticon {
  cursor: pointer;
}
/deep/ .ant-pagination {
  margin-bottom: 0;
  width: 100%;
  display: flex;
  .ant-pagination-total-text {
    flex: 1;
  }
}
</style>